<template>
    <!--
    功能:
        vue项目中使用axios进行获取api数据.
    说明:
        1. axios是在main.js中导入的, 这里可以通过this.$axios方式调用.
    -->
    <div>
        <div style="text-align: center; margin-top: 200px; font-size: 40px;">天知道</div>
        <div style="text-align: center; margin-top: 40px;">
            <input type="text" style="width: 300px; height: 25px;" v-on:keyup.enter="getCityWeather" v-model.trim="city" placeholder="请输入要查询的城市名称" />
            <button style="background-color: #d5abff; height: 30px;" v-on:click="getCityWeather">搜索</button>
            <br />
            <a href="#" v-for="(item, index) in citys" v-on:click="clickGetWeather(index)" v-bind:key="index">{{ item }}&nbsp;&nbsp;</a>
        </div>
        <div v-show="weatherRes.length > 0" style="text-align: center;">
            <ul style="margin: 0 auto;">
                <li class="li" v-for="(item, index) in weatherRes" :key="index">
                    <h1>{{ item.type }}</h1>
                    <p style="color: red;">{{ item.low }} ~ {{ item.high }}</p>
                    <p style="color: blue;">{{ item.date }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImportAxios",
        data() {
            return {
                city: '',
                citys: ['西安', '北京', '天津', '延安'],
                weatherRes: [],
                yesterday: null
            }
        },
        methods: {
            getCityWeather: function () {
                let vueInstance = this;
                if(this.city === '') {
                    return;
                }
                let url = 'http://wthrcdn.etouch.cn/weather_mini?city=' + vueInstance.city;
                vueInstance.$axios.get(url).then(function (response) {
                    window.console.log(typeof response.data.forecast);
                    vueInstance.weatherRes = response.data.data.forecast;
                    vueInstance.yesterday = response.data.data.yesterday;
                    window.console.log(111, vueInstance.weatherRes);
                }, function (err) {
                    window.console.log(err);
                });
            },
            clickGetWeather: function (index) {
                this.city = this.citys[index];
                this.getCityWeather();
            }
        }
    }
</script>

<style scoped>
    .li {
        border-left: 1px solid #666;
        float: left;
        list-style: none;
        margin-left: 20px;
    }

    .li:first-child {
        border-left: none;
    }

    .li * {
        padding: 0 10px 0 10px;
    }
</style>